<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理首页</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote layui-quote-nm">
                <div class="layui-inline">
                    <input class="layui-input" placeholder="关键字..." id="keyWords" autocomplete="off">
                </div>
                <button class="layui-btn layui-btn-normal" id="search">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
                <button class="layui-btn layui-btn-normal" id="addUser">添加</button>
            </blockquote>
        </div>
        <div class="layui-col-md12">
            <table class="layui-hide" id="table_user" lay-filter="user"></table>
        </div>
    </div>
</div>


<!-- 表格上的toobar工具条模板 -->
<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/layui/layui.js"></script>
<script>
    layui.use(['element', 'table', 'jquery', 'layer', 'form'], function () {
        var table = layui.table,
            layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            element = layui.element;
        var status = '';
        var currPage = 1;
        //处理类型管理部分的数据信息
        table.render({
            elem: '#table_user',
            url: '/system/user/getAllUsers',
            method: 'get',
            cols: [[
                {type: 'numbers'},
                {field: 'username', title: '用户名', align: 'center', edit: "text"},
                {field: 'password', title: '用户密码', align: 'center'},
                {field: 'phone', title: '联系电话', align: 'center'},
                {field: 'right', title: '操作', width: '10%', align: 'center', toolbar: '#tool'}
            ]],
            page: true,
            height: 'full-100',
            limit: 15,
            limits: [15, 20],
            loading: true,
            text: {
                none: '暂无相关数据'
            },
            done: function (res, curr, count) {
                currPage = curr
            },
            id: 'reload_user'//表格的唯一标识，重载用
        })
        //监听工具条
        table.on('tool(user)', function (obj) {
            var user = obj.data;
            if (obj.event === "del") {
                layer.msg('确定删除吗？', {
                    icon: 1,
                    time: 0,
                    shade: 0.2,
                    btn: ['确认', '取消'],
                    yes: function (index) {
                        $.ajax({
                            url: "/system/user/delUser",
                            type: "GET",
                            data: {userId: user.user_id},
                            success: function (res) {
                                if (res.status === 200) {
                                    table.reload('reload_user', {
                                        page: {
                                            curr: 1
                                        },
                                        where: {
                                            keyWords: $("#keyWords").val()
                                        }
                                    })
                                } else {
                                    layer.msg(res.msg, {
                                        icon: 5,
                                        time: 2000,
                                        anim: 1,
                                        shade: 0.2
                                    })
                                }
                            }
                        })
                    }
                })

            } else {
                return;
            }
        })
        $("#addUser").click(function () {
            layer.open({
                type: 1,
                btn: ['保存'],
                skin: 'layui-layer-demo', //样式类名
                anim: 1,
                shadeClose: true, //开启遮罩关闭
                content: '<form class="layui-form addUser" style="margin-top:20px;width:350px;">' +
                    '<div class="layui-form-item">' +
                    '<label class="layui-form-label">用户名</label>' +
                    '<div class="layui-input-inline">' +
                    '<input type="text" class="layui-input" name="username">' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                    '<label class="layui-form-label">联系电话</label>' +
                    '<div class="layui-input-inline">' +
                    '<input type="text" class="layui-input" name="phone">' +
                    '</div>' +
                    '</div>' +
                    '</form>',
                yes: function (index) {
                    $.ajax({
                        url: "/system/user/addUser",
                        type: "POST",
                        data: $('.addUser').serialize(),
                        success: function (res) {
                            if (res.status === 200) {
                                layer.close(index)
                                table.reload('reload_user')
                            } else {
                                layer.msg(res.msg, {
                                    time: 2000,
                                    shade: 0.2,
                                    icon: 5
                                })
                            }
                        }
                    })
                }
            });
            form.render()
        })
        //表格的重载
        $("#search").click(function () {
            table.reload('reload_user', {
                page: {
                    curr: 1
                },
                where: {
                    keyWords: $("#keyWords").val()
                }
            })
        })
    })
</script>
</body>
</html>